<script setup lang="ts">
import type { FormItemProps, FormInstance, FormProps, ComponentSize, FormRules } from 'element-plus'
import { getFlowInfoPage, addFlowInfo, updateFlowInfo, deleteFlowInfo } from '@/api/modules/flowInfo'
import type { FlowInfo, FlowForm } from "@/api/dataType.ts"
import { addFlowForm, getFlowFormByFlowInfoId, processOnline, offlineProcess } from "@/api/modules/flowForm"
import PcDsigner from "@/views/formCreate/pcDsigner/index.vue"
import MobileDsigner from "@/views/formCreate/mobileDsigner/index.vue"
import FlowIndex from "@/views/flowIndex/index.vue"

const labelPosition = ref<FormProps['labelPosition']>('right')
const ruleFormRef = ref<FormInstance>()
//数据表格
const tableData = ref<Array<FlowInfo>>([]);
const selectTabs = ref("first");
//流程信息
const formFrom = ref({
    no: "",//编号
    name: "",//流程名称
    isPc: 0,//pc端适配
    isMove: 0,//移动端适配
    type: "",//流程类型名称
    currentVersion: null,
    createTime: null,
    updateTime: null,
    exist: null
});
//流程版本信息
const formVersionFrom = ref<FlowForm>({
    id: '',//id
    flowInfoId: 0,//流程信息id
    versionName: '',//版本名称
    mvFormJson: [],//移动端表单
    pcFormJson: [],//PC端表单
    flowBpmnXml: '',
    lowFlowJson: '',
    processModel: {
        code: '',
        name: '',
        icon: {
            name: '',
            color: ''
        },
        process: {
            id: '',
            pid: '',
            name: '',
            type: 'start',
            executionListeners: []
        },
        enable: true,
        version: 1,
        sort: 0,
        groupId: '',
        remark: ''
    },
    createTime: '',//创建时间
    updateTime: '',//修改时间
    exist: 1,//是否删除
    state: 0
});
//查询表单
const selectForm = {
    name: ""
}
//选择流程定义
const selectFlowInfoId = ref();
//分页
const page = ref(1);
const limit = ref(10);
const total = ref(0);
//表单title
const formTitle = ref("");
//是否修改
const isUpdate = ref(false);
const addSign = ref(false);
//设置流程
const setSign = ref(false);
//设置流程
const setFlowVersionSign = ref(false);
const rules = reactive<FormRules<FlowInfo>>({
    no: [
        { required: true, message: '请输入编号', trigger: 'blur' },
        { min: 1, max: 10, message: '编号的长度在1至10之间', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 1, max: 20, message: '编号的长度在1至20之间', trigger: 'blur' },
    ],
    isPc: [
        { required: true, message: '请选择PC端适配', trigger: 'blur' },
    ],
    isMove: [
        { required: true, message: '请选择移动端适配', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请输入类型', trigger: 'blur' },
        { min: 1, max: 20, message: '编号的长度在1至20之间', trigger: 'blur' },
    ]
});
const selectFlowInfo = ref<FlowInfo>({
    id: 0,
    no: '',//编号
    name: '',//流程名称
    isPc: 0,//pc端适配
    isMove: 0,//移动端适配
    type: '',//流程类型名称
    currentVersion: '',
    createTime: '',
    updateTime: '',
    exist: 0
});
const flowFormList = ref<Array<FlowForm>>([]);

//新增流程信息
const addFlowInfoApi = () => {
    isUpdate.value = false;
    addSign.value = true;
    formTitle.value = "添加流程信息";
}

//修改流程信息
const updateFlowInfoApi = (row: FlowInfo) => {
    isUpdate.value = true;
    formTitle.value = "修改流程信息";
    formFrom.value = JSON.parse(JSON.stringify(row));
    addSign.value = true;
}

//获取流程
const pageFlowInfoApi = () => {
    getFlowInfoPage({
        page: page.value,
        limit: limit.value
    }).then(res => {
        tableData.value = res.dataList
        total.value = res.total
    })
}
//设置条数
const handleSizeChange = (val: number) => {
    limit.value = val;
    pageFlowInfoApi();
}
//设置页数
const handleCurrentChange = (val: number) => {
    page.value = val;
    pageFlowInfoApi();
}

//提交流程信息
const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (isUpdate.value) {
                updateFlowInfo(formFrom.value).then(res => {
                    addSign.value = false;
                    pageFlowInfoApi();
                    resetForm(formEl);
                    cleanForm();
                })
            } else {
                addFlowInfo(formFrom.value).then(res => {
                    addSign.value = false;
                    pageFlowInfoApi();
                    resetForm(formEl);
                    cleanForm();
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
//删除流程信息
const deleteFlowInfoApi = (id: number) => {
    deleteFlowInfo(id).then(res => {
        pageFlowInfoApi();
    })
}

//清除表单
const cleanForm = () => {
    formFrom.value = {
        no: "",//编号
        name: "",//流程名称
        isPc: 0,//pc端适配
        isMove: 0,//移动端适配
        type: "",//流程类型名称
        currentVersion: null,
        createTime: null,
        updateTime: null,
        exist: null
    };
}

//设置流程
const setFlowData = (row: FlowInfo) => {
    selectFlowInfo.value = row
    selectFlowInfoId.value = row.id
    getFlowFormByFlowInfoIdFun();
}
//获取流程信息
const getFlowFormByFlowInfoIdFun = async() =>{
    getFlowFormByFlowInfoId(selectFlowInfoId.value).then(res => {
        flowFormList.value = res.dataList;
        setSign.value = true;
        setFlowVersionSign.value = false;
    })
}
//创建流程
const createFlowForm = () => {
    formVersionFrom.value.flowInfoId = selectFlowInfo.value.id;
    addFlowForm(formVersionFrom.value).then(res => {
        formVersionFrom.value = res.data;
        setFlowVersionSign.value = true;
    })
}

//查看流程
const setFlowForm = (row: FlowForm) => {
    formVersionFrom.value = row;
    setFlowVersionSign.value = true;
}


//上线流程
const processOnlineApi = (row: FlowForm) => {
    processOnline(row).then(res => {
        getFlowFormByFlowInfoId(row.flowInfoId).then(res => {
            flowFormList.value = res.dataList;
            setSign.value = true;
        })
    })
}

//下线流程
const offlineProcessApi = (row: FlowForm) => {
    offlineProcess(row).then(res => {
        getFlowFormByFlowInfoId(row.flowInfoId).then(res => {
            flowFormList.value = res.dataList;
            setSign.value = true;
        })
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    pageFlowInfoApi();
})

</script>
<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="selectForm" class="demo-form-inline" style="width: 97%;margin: 15px;">
                    <el-form-item label="流程名称">
                        <el-input v-model="selectForm.name" placeholder="请输入流程名称" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addFlowInfoApi()">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border :stripe="true" style="width: 97%;margin: 15px;" max-height="500"
                    height="500" size="small">
                    <el-table-column prop="no" label="编号" align="center" />
                    <el-table-column prop="name" label="流程名称" align="center" />
                    <el-table-column prop="isPc" label="pc端适配" align="center" />
                    <el-table-column prop="isMove" label="移动端适配" align="center" />
                    <el-table-column prop="type" label="流程类型名称" align="center" />
                    <el-table-column prop="currentVersion" label="当前流程版本" align="center" />
                    <el-table-column prop="createTime" label="创建时间" align="center" />
                    <el-table-column label="操作" align="center" width="300">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="setFlowData(scope.row)">设置流程</el-button>
                            <el-button type="primary" size="small" @click="updateFlowInfoApi(scope.row)">编辑</el-button>
                            <el-popconfirm title="是否要删除这条数据？" width="200" @confirm="deleteFlowInfoApi(scope.row.id)">
                                <template #reference>
                                    <el-button type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationTable">
                    <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[10, 15, 20, 15]"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </el-col>
        </el-row>
    </div>
    <el-dialog v-model="addSign" :title="formTitle" width="500">
        <el-form ref="ruleFormRef" :rules="rules" :label-position="labelPosition" label-width="auto" :model="formFrom"
            style="max-width: 600px">
            <el-form-item label="流程编号" prop="no">
                <el-input v-model="formFrom.no" />
            </el-form-item>
            <el-form-item label="流程名称" prop="name">
                <el-input v-model="formFrom.name" />
            </el-form-item>
            <el-form-item label="pc端适配" prop="isPc">
                <el-radio-group v-model="formFrom.isPc">
                    <el-radio :value="0">否</el-radio>
                    <el-radio :value="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="移动端适配" prop="isMove">
                <el-radio-group v-model="formFrom.isMove">
                    <el-radio :value="0">否</el-radio>
                    <el-radio :value="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="流程类型名称" prop="type">
                <el-input v-model="formFrom.type" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addSign = false">取消</el-button>
                <el-button type="primary" @click="submit(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="setSign" title="设置流程" width="500" :fullscreen="true">
        <el-button type="primary" style="float:right;margin:15px" @click="createFlowForm()"
            size="small">新增流程版本</el-button>
        <el-table :data="flowFormList" style="width: 98%;margin:15px" border>
            <el-table-column prop="id" label="版本编号" align="center" />
            <el-table-column prop="versionName" label="版本名称" align="center" />
            <el-table-column prop="flowId" label="流程定义编号" align="center" />
            <el-table-column prop="state" label="是否上线" align="center">
                <template #default="scope">
                    <div v-if="scope.row.state == 1">启用</div>
                    <div v-if="scope.row.state == 0">未启用</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" @click="setFlowForm(scope.row)" size="small">进入编辑</el-button>
                    <el-button type="success" @click="processOnlineApi(scope.row)" size="small"
                        v-if="scope.row.state == 0">上线</el-button>
                    <el-button type="danger" @click="offlineProcessApi(scope.row)" size="small"
                        v-if="scope.row.state == 1">下线</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog v-model="setFlowVersionSign" title="流程配置" width="500" :fullscreen="true" :before-close="getFlowFormByFlowInfoIdFun">
        <div v-if="setFlowVersionSign">
            <el-tabs v-model="selectTabs" type="card" class="demo-tabs">
                <el-tab-pane label="PC表单设置" name="first">
                    <PcDsigner v-if="selectTabs == 'first'" :flowFormId="formVersionFrom.id"></PcDsigner>
                </el-tab-pane>
                <el-tab-pane label="移动端表单设置" name="second">
                    <MobileDsigner v-if="selectTabs == 'second'" :flowFormId="formVersionFrom.id"></MobileDsigner>
                </el-tab-pane>
                <el-tab-pane label="流程管理" name="third">
                    <FlowIndex v-if="selectTabs == 'third'" :flowFormId="formVersionFrom.id"></FlowIndex>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>
</template>
<style scoped>
.paginationTable {
    float: right;
    margin: 15px;
    text-align: right;
}
</style>
